<template>
  <div class="mainContent">
    <a-spin :spinning="spinning">
      <div style="width: 90%; margin: 0 auto; margin-top: 30px">
        <a-row>
          <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
            >{{ queryDetail.transName }}交易信息</a-col
          >
        </a-row>
        <a-form style="margin-bottom: 20px" layout="inline">
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="商户号"
          >
            <span class="ant-form-text">
              {{ queryDetail.merchantNo }}
            </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="商户名称"
          >
            <span class="ant-form-text">
              {{ queryDetail.merchantName }}
            </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="会员编号"
          >
            <span class="ant-form-text">
              {{ queryDetail.mainMemberNo }}
            </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="交易类型"
          >
            <span class="ant-form-text">
              {{ queryDetail.transName }}
            </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="借贷标志"
          >
            <span class="ant-form-text">
              {{ queryDetail.externalAccountType | AccountTypefilter }}
            </span>
          </a-form-item>
          <!-- <a-form-item class='formItemWidth' v-bind="formItemLayout" label="交易方式">
                        <span class="ant-form-text">
                            {{queryDetail.subTransName}}
                        </span>
                    </a-form-item> -->
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="卡号"
          >
            <span v-if="sensitive=='1'" class="ant-form-text">
              {{ queryDetail.externalAccountNo | AccountNofilter }}
            </span>
            <span v-if="sensitive=='0'" class="ant-form-text">
              {{ queryDetail.externalAccountNo }}
            </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="商户单号"
          >
            <span class="ant-form-text">
              {{ queryDetail.merchantOrderNo }}
            </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="交易单号"
          >
            <span class="ant-form-text">
              {{ queryDetail.transOrderNo }}
            </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="上游单号"
          >
            <span class="ant-form-text">
              {{ queryDetail.externalOrderNo }}
            </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="交易日期"
          >
            <span class="ant-form-text">
              {{ queryDetail.transDate }}
            </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="交易时间"
          >
            <span class="ant-form-text">
              {{ queryDetail.transTime | timeFilter }}
            </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="交易金额"
          >
            <span class="ant-form-text">
              {{ queryDetail.amount | cashfilter }}
            </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="交易状态"
          >
            <span class="ant-form-text">
              {{ queryDetail.statusName }}
            </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="交易流水号"
          >
            <span class="ant-form-text">
              {{ queryDetail.serialNo }}
            </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="交易返回码"
          >
            <span class="ant-form-text">
              {{ queryDetail.responseCode }}
            </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="备注"
          >
            <span class="ant-form-text">
              {{ queryDetail.remark }}
            </span>
          </a-form-item>
          <a-row>
            <a-form-item
              style="width: 100%"
              class="formItemWidth"
              :labelCol="{ span: 3 }"
              :wrapperCol="{ span: 21 }"
              label="返回码注释"
            >
              <span class="ant-form-text">
                {{ queryDetail.responseMessage }}
              </span>
            </a-form-item>
          </a-row>
          <a-row>
            <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
              >终端信息</a-col
            >
          </a-row>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="终端号"
          >
            <span class="ant-form-text">
              {{ queryDetail.terminalNo }}
            </span>
          </a-form-item>

          <a-row>
            <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
              >手续费信息</a-col
            >
          </a-row>
          <a-row>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="总手续费"
            >
              <span class="ant-form-text">
                {{ queryDetail.feeAmount | cashfilter }}
              </span>
            </a-form-item>
          </a-row>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="交易手续费"
          >
            <span class="ant-form-text">
              {{ queryDetail.t1FeeAmount | cashfilter }}
            </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="D0垫资手续费"
          >
            <span class="ant-form-text">
              {{ queryDetail.d0FeeAmount | cashfilter }}
            </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="D0单笔手续费"
          >
            <span class="ant-form-text">
              {{ queryDetail.d0SingleAmount | cashfilter }}
            </span>
          </a-form-item>

          <a-row>
            <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
              >结算信息</a-col
            >
          </a-row>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="结算类型"
          >
            <span class="ant-form-text">
              {{ queryDetail.settlePeriod }}
            </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="结算状态"
          >
            <span class="ant-form-text">
              {{ queryDetail.settleStatus }}
            </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="上游结算日期"
          >
            <span class="ant-form-text">
              {{ queryDetail.finishTransDate }}
            </span>
          </a-form-item>
             <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="账务交易单号"
          >
            <span class="ant-form-text">
              {{ queryDetail.accountSettleOrderNo }}
            </span>
          </a-form-item>
          <a-row >
            <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
              >交易凭证</a-col
            >
          </a-row>
          <a-form-item class="formItemWidth"  v-bind="formItemLayout">
            <span class="ant-form-text" v-if="queryDetail.attachRequest.files.length">
              <a-button :loading="downLoading" type="primary" @click="download"
                >交易凭证下载</a-button
              >
            </span>
            <span>
              暂无交易凭证
            </span>
          </a-form-item>

          <!-- <a-row>
                        <a-col :xs="{ span : 24 }" :sm="{ span:4 }" class="formGroupTitle">合作机构信息</a-col>
                    </a-row>
                    <a-form-item class='formItemWidth' v-bind="formItemLayout" label="合作机构号">
                        <span class="ant-form-text">
                            {{queryDetail.agentCode}}
                        </span>
                    </a-form-item>
                    <a-form-item class='formItemWidth' v-bind="formItemLayout" label="合作机构名">
                        <span class="ant-form-text">
                            {{queryDetail.agentName}}
                        </span>
                    </a-form-item> -->
        </a-form>
        <a-button @click="backTransList">
          <a-icon type="double-left" />返回</a-button
        >
      </div>
    </a-spin>
  </div>
</template>

<script>
import { message } from "ant-design-vue";
import api from "@/common/api";
import { error } from "util";
import { fail } from "assert";
import AHideData from "../../common/HideData";
const columns = [
  { title: "结算时间", dataIndex: "ctime" },
  { title: "交易单号", dataIndex: "time" },
  { title: "业务类型", dataIndex: "No" },
  // { title: "商户名称", dataIndex: "No1" },
  { title: "收入金额（元）", dataIndex: "account" },
  { title: "支出金额（元）", dataIndex: "type" },
  { title: "账户余额（元）", dataIndex: "STATUS" },
];

const data = [
  {
    key: 1,
    ctime: "2019-01-20",
    time: "2018-01-02",
    No: "124235436478",
    STATUS: "交易完成",
    type: "扫码支付",
    account: "42355元",
    description:
      "My name is Joey Black,, I am 32 years old, living in Sidney No. 1 Lake Park.",
  },
];

export default {
  name: "orgMyInfo",
  components: {},
  data() {
    return {
      downLoading: false,
      iconLoading: false,
      spinning: false,
      queryDetail: {},
      agentdata: {},
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15, offset: 1 },
          md: { span: 15, offset: 1 },
        },
      },
      sensitive: localStorage.getItem("sensitive"),
    };
  },
  watch: {},
  computed: {},
  filters: {
    nameFilter(value) {
      if (value) {
        return "*" + value.substring(1, value.length);
      }
      return "";
    },
    phoneFilter(value) {
      if (value) {
        return (
          value.substring(0, 3) + "****" + value.substring(7, value.length)
        );
      }
      return "";
    },

    timeFilter: function (value) {
      if (value) {
        let year = value.substring(0, 2);
        let mouth = value.substring(2, 4);
        let day = value.substring(4, 6);
        return year + ":" + mouth + ":" + day;
      }
    },
    AccountNofilter(value) {
      if (value) {
        var reg1 = value.slice(0, 6);
        var reg2 = value.slice(-4);
        return reg1 + "*********" + reg2;
      }
    },
    AccountTypefilter(value) {
      if (value == "C") {
        return "贷记卡";
      } else {
        return "借记卡";
      }
    },
    cashfilter(value) {
      return parseFloat(value / 100).toFixed(2) + "元";
    },
  },
  mounted() {
    let id = this.$route.params.id;
    this.getQueryDetail(id);
  },
  methods: {
    getQueryDetail(id) {
      this.$axios
        .get("/agent/transaction/transList/unionPay/qr/detail/" + id)
        .then(
          (res) => {
            console.log(res);
            if (res.data.code == "OK") {
              // this.queryDetail = res.data.data.transOrderDTO;
              this.queryDetail = res.data.data;
              // this.agentdata = res.data.data.agent;
            }
          },
          (err) => {}
        );
    },
    download() {
      this.downLoading = true;
      console.log("attachRequest", this.queryDetail.attachRequest);

      this.$axios
        .post("/file/file/attach", this.queryDetail.attachRequest)
        .then(
          (res) => {
            this.downLoading = false;
            console.log("res", res);
            //   console.log("res.data.data:",res.data.data);
            if (res.data.data != null) {
              window.location.href = res.data.data;
            } else {
              this.$message.error("附件不存在");
            }
          },
          (err) => {
            this.downLoading = false;
            this.$message.error(err.message);
          }
        );
    },
    backTransList() {
      this.$router.push("/org/transmanage/transquery");
    },
  },
};
</script>

<style lang="less" scoped>
.card_sty {
  margin-bottom: 30px;
}

.mainContent {
  overflow-y: scroll;
  height: 100%;
  padding: 30px;
}

/* 滚动条样式 */
.mainContent::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

span {
  cursor: pointer;
}

.formItemWidth {
  width: 30%;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  margin-top: 15px;
  text-align: left;
  /* margin-left: 20px; */
}

.ant-card-head-title {
  padding: 12px 0 !important;
}

.ant-card-grid {
  padding: 12px;
}

.ant-card-head {
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 24px;
  border-radius: 2px 2px 0 0;
  zoom: 1;
  margin-bottom: -1px;
  min-height: 45px !important;
  font-size: 16px;
  color: #52506b;
  font-weight: 400;
  display: flex;
}

.ant-card .ant-card-grid:nth-child(4n + 1),
.ant-card .ant-card-grid:nth-child(4n + 2) {
  background: #f7f9fc;
}

.ant-card-grid:hover {
  /* box-shadow: none; */
  box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
    1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
}
</style>